import React from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import BaseComponent from '../../components/common/baseComponent.js';
import menberIcon from '../../../assets/images/qiji/giftcenter/menber.png';
// import giftIcon from '../../../assets/images/qiji/giftcenter/gift.png';

import {
  OLD_QIJI_SHELL_GIFT,
  OLD_QIJI_ORDER_LIST,
  OLD_QIJI_COUPON_LIST,
} from '../../constants/setting';

@connect(({ user, vip }) => {
  return {
    sumGift: user.getIn(['gift', 'sum']),
    couponAmount: user.getIn(['gift', 'couponAmount']),
    couponCount: user.getIn(['gift', 'couponCount']),
    vip: vip.getIn(['vip', 'list', 0]),
  };
})
class GiftCenter extends BaseComponent {
  state = {
    tabIndex: -1,
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'user/fetchSumGift',
    });
    this.props.dispatch({
      type: 'user/fetchUserCouponTotal',
    });
    this.props.dispatch({
      type: 'vip/fetchUserVip',
    });
  }

  clickTab = (tabIndex) => {
    this.setState({
      tabIndex,
    });
  }

  goGift = () => {
    window.location.href = OLD_QIJI_SHELL_GIFT;
  }

  goVip = () => {
    this.props.history.push('vipCard');
  }

  goCouponList = () => {
    window.location.href = OLD_QIJI_COUPON_LIST;
  }

  goOrderList = () => {
    window.location.href = OLD_QIJI_ORDER_LIST;
  }

  render() {
    const { tabIndex } = this.state;
    const { sumGift, couponAmount, couponCount, vip } = this.props;

    let vipView;
    if (vip) {
      vipView = (
        <div className={`card-view ${vip.get('cardId') === 1 ? 'gold' : 'silver'}`}>
          <div className="date-view">有效期至{moment(vip.get('endTime')).format('YYYY.MM.DD')}</div>
          <div className="card-text">加油每升立减{vip.get('amountYuan')}元</div>
          <div className="money-view">
            <div className="money-cell">
              <div>本月已使用金额</div>
              <p className="money">{vip.get('useMoneyYuan')}<span className="unit">元</span></p>
            </div>
            <div className="money-cell">
              <div>剩余优惠金额</div>
              <p className="money">{vip.get('remainMoneyYuan')}<span className="unit">元</span></p>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="gift-center-qiji">
        <div className="gift-info-box">
          <div className="gift-info">
            <div className={`info-item ${tabIndex === 0 ? 'active' : ''}`} onClick={this.goOrderList}>
              <div className="item-text">{sumGift}<span>元</span></div>
              <div className="item-title">已为您省钱</div>
            </div>
            <div className={`info-item ${tabIndex === 1 ? 'active' : ''}`} onClick={this.goCouponList}>
              <div className="item-text">{couponCount}张优惠券可用</div>
              <div className="item-ctr">(价值{couponAmount}元)</div>
              <div className="item-title">我的卡券</div>
            </div>
            <div />
          </div>
        </div>
        {vipView}
        <div className="change-src">
          <div className="plateTitle">会员中心</div>
          <div className="img-list">
            <img src={menberIcon} alt="" className="img-member" onClick={this.goVip} />
          </div>
        </div>
      </div>
    );
  }
}

export default GiftCenter;
